<template>
  <div>
    <van-nav-bar title="个人信息" left-arrow @click-left="onClickLeft" />
    <van-cell-group class="operation-list">
      <van-cell title="用户信息更改" is-link to="InfoUpdate" />
      <van-cell title="账号密码重置" is-link to="PasswordUpdate" />
    </van-cell-group>
    <van-button
      round
      class="logout-btn"
      @click="outLogin"
      block
      color="linear-gradient(to right, #ff6034, #ee0a24)"
    >
      退出登录
    </van-button>
  </div>
</template>

<script>
import { NavBar, Cell, CellGroup, Button, Toast } from "vant";
import { logout } from "@/network";
export default {
  name: "userInfo",
  data() {
    return {};
  },
  components: {
    [NavBar.name]: NavBar,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [Toast.name]: Toast,
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    async outLogin() {
      const { data } = await logout();
      if (data.errmsg === "成功" && data.errno === 0) {
        this.$store.commit("setUserInfo", null);
        Toast.loading({
          message: "正在退出",
          forbidClick: true,
          loadingType: "spinner",
        });
        setTimeout(() => {
          Toast.success("退出成功");
          this.$store.commit('clearInfo')
          this.$router.push({ name: "Home" });
        }, 1000);
      } else if (data.errno === 501) {
        this.$store.commit("setUserInfo", null);
      }
    },
  },
  created() {},
  mounted() {},
};
</script>

<style lang="less" scoped>
.operation-list {
  width: 90%;
  margin: 0 auto;
}
.logout-btn {
  position: absolute;
  bottom: 50px;
  width: 80%;
  // margin: 20px auto;
  left: 50%;
  transform: translateX(-50%);
}
</style>

